<template>
  <div class="page-container">
    <!-- 搜索筛选区域 -->
    <div class="search-section">
      <el-form :model="queryParams" inline class="search-form" ref="queryRef">
        <el-form-item prop="invoiceTitle">
          <el-input
            placeholder="开票抬头"
            v-model="queryParams.invoiceTitle"
          ></el-input>
        </el-form-item>
        <el-form-item prop="invoiceTin">
          <el-input
            placeholder="纳税人识别号"
            v-model="queryParams.invoiceTin"
          ></el-input>
        </el-form-item>

        <el-form-item prop="invoiceEmail">
          <el-input
            placeholder="邮箱"
            v-model="queryParams.invoiceEmail"
          ></el-input>
        </el-form-item>
        <el-form-item label="开始日期 - 结束日期">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 300px"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="text" @click="handleSearch"> 查询 </el-button>
          <el-button type="info" link @click="resetSearch"> 重置 </el-button>
        </el-form-item>
      </el-form>

      <div class="action-section">
        <el-button
          type="primary"
          @click="handleAdd"
          style="background-color: #039691"
        >
          新增
        </el-button>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="table-wrapper" style="margin-top: 10px">
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column type="index" width="80" align="center" label="序号" />
        <el-table-column prop="invoiceTitle" label="开票抬头" width="120" />
        <el-table-column
          prop="invoiceTin"
          label="纳税人识别号"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="recipientAddress"
          label="地址"
          show-overflow-tooltip
          min-width="180"
          align="center"
        />
        <el-table-column
          prop="invoicePhone"
          label="电话"
          min-width="120"
          align="center"
        />
        <el-table-column
          prop="openingBank"
          label="开户行"
          show-overflow-tooltip
          width="120"
          align="center"
        />
        <el-table-column
          prop="accountNumber"
          label="账号"
          width="180"
          align="center"
        />
        <el-table-column
          prop="invoiceEmail"
          label="接收邮箱"
          width="120"
          align="center"
        />
        <el-table-column
          prop="recipientTelephone"
          label="收件人+电话"
          width="160"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="recipientAddress"
          label="收件人地址"
          show-overflow-tooltip
          width="160"
          align="center"
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="160"
          align="center"
        />
        <el-table-column label="操作" width="120" align="center" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleEdit(row)">
              编辑
            </el-button>
            <el-button type="danger" link @click="handleDel(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-section">
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getTableData"
        />
      </div>
    </div>
    <invoiceForm
      v-model:value="addVisible"
      :id="id"
      v-if="addVisible"
      @on-success="getTableData"
    ></invoiceForm>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, toRefs } from "vue";
import invoiceForm from "./invoiceForm.vue";

import { getInvoiceInfoList, deleteInvoiceInfo } from "@/api/invoice.js";

const { proxy } = getCurrentInstance();

const dateRange = ref([]);
const loading = ref(false);
const tableData = ref([]);
const total = ref(0);
const addVisible = ref(false);
const id = ref("");

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    invoiceTitle: undefined,
    invoiceTin: undefined,
    approvalStatus: undefined,
  },
});

const { queryParams } = toRefs(data);

const handleAdd = () => {
  addVisible.value = true;
};

function handleSearch() {
  queryParams.pageNum = 1;
  getTableData();
}
function resetSearch() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  handleSearch();
}

const handleEdit = (row) => {
  id.value = row.id;
  addVisible.value = true;
};

function handleDel(row) {
  proxy.$modal
    .confirm("是否确认删除？")
    .then(function () {
      return deleteInvoiceInfo(row.id);
    })
    .then(() => {
      getTableData();
      proxy.$modal.msgSuccess("取消成功");
    })
    .catch(() => {});
}

function getTableData() {
  loading.value = true;
  getInvoiceInfoList(
    proxy.addDateRange(data.queryParams, dateRange.value)
  ).then((res) => {
    loading.value = false;
    tableData.value = res.rows;
    total.value = res.total;
  });
}
onMounted(() => {
  getTableData();
});
</script>

<style lang="scss">
.page-container {
  padding: 10px;
  height: 100%;
  .search-wrapper {
    margin: 20px;
    :deep(.el-card__body) {
      padding-bottom: 2px;
    }
  }
  .table-wrapper {
    height: 100%;
  }
}
</style>
